<template>
	<view class="">
		<z-nav-bar transparentFixedFontColor="#FFF" type="transparentFixed" title="红娘列表"></z-nav-bar>
		<view class="h-bg-img">
			<image :src="imgUrl + 'static/web/img/hongnianglist.png'" mode=""></image>
		</view>
		<view class="h-bg-tit flex align-item">
			<image :src="imgUrl + 'static/web/img/202205211904.png'" mode=""></image>
			<view class="h-bg-tit-t">
				红娘团队
			</view>
			<image :src="imgUrl + 'static/web/img/202205211904.png'" mode=""></image>
		</view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="con" v-if="matchmakerList.length > 0">
			<view class="lists-item flex align-item">
				<view class="lists-item-left flex align-item column" @click="goList(item.u_id)" v-for="(item,index) in matchmakerList" :key="index">
					<image class="avatar" :src="item.logo" mode=""></image>
					<view class="info">
						<view class="info-name" v-if="item.is_personal == 1">
							{{ item.name || '' }}
						</view>
						<view class="info-name" v-else>
							{{ item.organization_name || '' }}
						</view>
						
					</view>
					<view class="info-shuju">
						旗下人员{{ item.qixiaNum || 0 }}人
					</view>
					<view class="sixin" @click.stop="sixin(item.u_id)">
						私信
					</view>
				</view>
				 <view class="more-g flex align-item" @click="getMore">
				 	<text style="margin-right: 10rpx;">查看更多</text>
					<u-icon name="arrow-down" color="#FFFFFF" size="14"></u-icon>
				 </view>
			</view>
			<view class="h-bg-tit flex align-item">
				<image :src="imgUrl + 'static/web/img/202205211904.png'" mode=""></image>
				<view class="h-bg-tit-t">
					牵手成功案例
				</view>
				<image :src="imgUrl + 'static/web/img/202205211904.png'" mode=""></image>
			</view>
			<view class="hn-swiper-adv">
				<swiper class="swiper-hn" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
								:duration="1000" :vertical="true" :display-multiple-items="3">
					<swiper-item>
						<view class="swiper-it flex align-item">
							<view class="swiper-it-tit" style="margin-right: 44rpx;">
								恭喜会员
							</view>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								约翰斯
							</view>
							<image class="img-icon" :src="imgUrl + 'static/web/icon/202205222001.png'" mode=""></image>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								郭沐沐
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-it flex align-item">
							<view class="swiper-it-tit" style="margin-right: 44rpx;">
								恭喜会员
							</view>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								约翰斯
							</view>
							<image class="img-icon" :src="imgUrl + 'static/web/icon/202205222001.png'" mode=""></image>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								郭沐沐
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-it flex align-item">
							<view class="swiper-it-tit" style="margin-right: 44rpx;">
								恭喜会员
							</view>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								约翰斯
							</view>
							<image class="img-icon" :src="imgUrl + 'static/web/icon/202205222001.png'" mode=""></image>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								郭沐沐
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-it flex align-item">
							<view class="swiper-it-tit" style="margin-right: 44rpx;">
								恭喜会员
							</view>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								约翰斯
							</view>
							<image class="img-icon" :src="imgUrl + 'static/web/icon/202205222001.png'" mode=""></image>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								郭沐沐
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-it flex align-item">
							<view class="swiper-it-tit" style="margin-right: 44rpx;">
								恭喜会员
							</view>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								约翰斯
							</view>
							<image class="img-icon" :src="imgUrl + 'static/web/icon/202205222001.png'" mode=""></image>
							<image class="img-avatar" :src="imgUrl + 'static/web/icon/WeChatIcon.png'" mode=""></image>
							<view class="swiper-it-tit">
								郭沐沐
							</view>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
		</view>
		<view class=""  style="margin-top: 300rpx;" v-else>
			<u-empty
			        mode="data"
			        icon="http://cdn.uviewui.com/uview/empty/data.png"
					text=" "
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.$http.baseUrl, // 服务器域名
				matchmakerList: [], // 存储红娘列表
				limit: 4, // 每页的请求条件
				page: 1, // 页码
				total: 0, // 数据总数量
			}
		},
		methods: {
			// 前往对应红娘的页面
			goList(i){
				uni.navigateTo({
					url: '/pages/home/matchmaker_user/matchmaker_user?user_id=' + i
				})
			},
			// 获取红娘列表
			getMatchmakerList(){
				var that = this
				that.$http.get('api/ZhMatchmaker/index',{'page': that.page,'limit':that.limit}).then(res=>{
					if(res){
						that.matchmakerList = [...that.matchmakerList,...res.list]
						that.total = res.count
					}
				})
			},
			// 查看更多
			getMore(){
				if(this.matchmakerList.length < this.total){
					this.page++
					this.getMatchmakerList()
				}else if (this.matchmakerList.length == this.total){
					uni.showToast({
						title: '没有更多了~~',
						icon: 'none'
					})
				}
			},
			//私信
			sixin(id){
				uni.navigateTo({
					url: '/pages/chat/chat?s_id=' + id
				})
			}
			
		},
		onLoad() {
			this.getMatchmakerList()
		},
		// 触底触发
		onReachBottom() {
			// if(this.matchmakerList.length < this.total){
			// 	this.page++
			// 	this.getMatchmakerList()
			// }
		},
	}
</script>
<style>
	page {
		background-color: #7F5AFF;
	}
</style>

<style lang="scss">
.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.h-bg-img {
	width: 100%;
	height: 666rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.h-bg-tit {
	justify-content: center;
	width: 100%;
	image {
		width: 18rpx;
		height: 18rpx;
	}
	.h-bg-tit-t {
		font-size: 38rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin: 0 25rpx;
	}
}
.hn-swiper-adv {
	padding: 32rpx 0 70rpx;
	.swiper-hn {
		
		.swiper-it {
			width: 100%;
			padding: 13rpx 84rpx;
			// #ifdef H5
			padding: 13rpx 40rpx;
			// #endif
			background: rgba(255, 255, 255, .2);
			border-radius: 28rpx;
			.swiper-it-tit {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			.img-avatar {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
				border-radius: 50%;
			}
			.img-icon {
				width: 26rpx;
				height: 26rpx;
				margin: 0 24rpx;
			}
		}
	}
}
.con {
	padding: 0 30rpx;
	
	.lists-item {
		flex-wrap: wrap;
		.lists-item-left {
			width: 333rpx;
			padding: 44rpx 40rpx 34rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 48rpx 24rpx 0 0;
			.avatar {
				width: 135rpx;
				height: 135rpx;
				// margin-right: 30rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.info {
				.info-name {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #000013;
					line-height: 45rpx;
					margin-top: 24rpx;
				}
			}
			.info-shuju {
				font-size: 28rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #6A6A7E;
				margin-top: 16rpx;
			}
			.sixin {
				width: 170rpx;
				height: 64rpx;
				background: #ECE6FF;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7F5AFF;
				line-height: 64rpx;
				text-align: center;
				margin-top: 32rpx;
			}
		}
		.more-g {
			justify-content: center;
			width: 100%;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 64rpx 0;
		}
		.lists-item-right {
			.icon1 {
				width: 28rpx;
				height: 32rpx;
				margin-right: 24rpx;
			}
			.icon2 {
				width: 37rpx;
				height: 37rpx;
			}
		}
	}
	.lists-item-left:nth-child(2n){
		margin-right: 0;
	}
}

</style>
